<!DOCTYPE html PUBLIC "-//W3C//DTD XHMTL 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhmtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset="uft-8"/>
<title>节目时钟</title>
</head>
<body>
<canvas id="drawing" width="200" height="200" sytle="border:#0F0 solid 1px">program clock</canvas>
<script>
    var min;
    var hour;
    var second;
    function drawClock(){
        var drawing=document.getElementById("drawing");
        if(drawing.getContext){
		        var context=drawing.getContext("2d");
            context.beginPath();
		        context.arc(100,100,99,0,2*Math.PI,false);

            context.moveTo(194,100);
	          context.arc(100,100,94,0,2*Math.PI,false);

		        context.translate(100,100);

		        context.font="bold 14px Arial";
		        context.textAlign="center";
		        context.textBaseline ="middle";
		        context.fillText("12",0,-85);

		        context.strokeStyle="rgba(0,0,255)";
		        context.stroke();
		   }
	}
  drawClock();
  setInterval("clock()",1000);

  function clearPreviousSecMinHour(context,min,hour,second){
      context.clearRect(0,0,200,200);
  }



	function clock(){

  	   var context=drawing.getContext("2d");

       context.translate(-100,-100);
       clearPreviousSecMinHour(context,min,hour,second);
       drawClock();

  	   var d = new Date();
    	 min = d.getMinutes();
  	   hour = d.getHours();
       second = d.getSeconds();

       context.moveTo(0,0);
       context.lineTo(80*Math.sin(2*Math.PI*second*6/360),-80*Math.cos(2*Math.PI*second*6/360));

  	   context.moveTo(0,0);
       context.lineTo(65*Math.sin(2*Math.PI*min*6/360),-65*Math.cos(2*Math.PI*min*6/360));

       //draw Hour line
		   console.log(d.getHours());
       context.moveTo(0,0);
       context.lineTo(50*Math.sin(2*Math.PI*(hour*30+min*30/60)/360),-50*Math.cos(2*Math.PI*(hour*30+min*30/60)/360));

		   context.strokeStyle="rgba(0,0,255)";
		   context.stroke();
	}

</script>
</body>
</html>
